<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-1.11.3.js"></script>

    <script>
        function moveAll(srcId, targetId) {
            $('#' + targetId).append($("#" + srcId + " > option"));
        }

        function moveSelected(srcId, targetId) {
            $('#' + targetId).append($('#' + srcId + ' > option:selected'));
        }
    </script>
</head>

<body>


<table border="1">
    <tr>
        <td>
            <select id="sel1" style="width: 80px;height: 160px" size="8" multiple="multiple">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
                <option value="4">选项4</option>
                <option value="5">选项5</option>
                <option value="6">选项6</option>
                <option value="7">选项7</option>
            </select>
        </td>
        <td>
            <button id="btn1" onclick="moveSelected('sel1','sel2')">--></button>
            <br>
            <button id="btn2" onclick="moveAll('sel1','sel2')">==></button>
            <br>
            <button id="btn3" onclick="moveSelected('sel2','sel1')"><--</button>
            <br>
            <button id="btn4" onclick="moveAll('sel2','sel1')"><==</button>
            <br>
        </td>
        <td>
            <select id="sel2" style="width: 80px;height: 160px" size="8" multiple="multiple"></select>
        </td>
    </tr>
</table>

</body>
</html>